@import 'tailwindcss';

@theme {
  --breakpoint-3xl: 120rem;
}

@font-face {
  font-family: 'oppo-3.0-regular';
  src: url('./font/OPPOSans3.0cn-Regular.woff2');
}
@font-face {
  font-family: 'oppo-3.0-medium';
  src: url('./font/OPPOSans3.0cn-Medium.woff2');
}
@font-face {
  font-family: 'oppo-regular';
  src: url('./font/OPPOSans-Regular.ttf');
}

:root {
  --mo-first-nav-height: 3.125rem;
  --mo-second-nav-height: 5.75rem;
  --pc-first-nav-height: 3.25rem;
  --pc-second-nav-height: 3rem;
  font-family:
    'oppo-3.0-medium',
    'oppo-3.0-regular',
    'oppo-regular',
    PingFang SC,
    Helvetica,
    Arial,
    sans-serif;
}

@layer components {
  ._rounded {
    @apply rounded-sm md:rounded-md lg:rounded-lg;
  }

  ._pc-1312-content {
    @apply max-w-[82rem] lg:w-[clamp(60.125rem,34.9821rem+39.2857vw,82rem)]
    mx-[1rem] sm:max-lg:mx-[1.5rem] lg:mx-auto;
  }
  ._pc-lg-880-content {
    @apply max-w-[82rem] lg:w-[clamp(55rem,24.0738rem+48.3221vw,82rem)]
    mx-[1rem] sm:max-lg:mx-[1.5rem] lg:mx-auto;
  }

  .pc-container-content-1312-grid {
    grid-template-areas: '... content ...';
    @apply grid
    grid-cols-[1rem_minmax(auto,82rem)_1rem]
    sm:max-lg:grid-cols-[1.5rem_minmax(auto,82rem)_1.5rem]
    lg:grid-cols-[minmax(4rem,1fr)_minmax(auto,82rem)_minmax(4rem,1fr)];

    & > .middle-content {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      grid-area: content;
    }
  }
}
